<template>
  <CustomizeSelect ref="dicCustomizeSelect" @customize-change="customizeChange" v-bind="props" :url="url" text-filed="text" value-field="val"
                    :input-size="inputSize"  >
  </CustomizeSelect>
</template>
<script setup lang="ts">

import CustomizeSelect from "@/components/plugs/form/CustomizeSelect.vue";
import {computed, nextTick, ref} from "vue";
const emits = defineEmits(["customizeChange"]);

const props = withDefaults(defineProps<{
  name?:string,
  dicType?:string,
  inputSize?: 'large' | 'small' | 'default'
  selectedChange?: (value:any) => void;
  placeholder?: string;
  defaultValue?:string | [] | number;
  isMultiple?: boolean;
  property?: any
}>(),{
  inputSize: 'default',
  placeholder: "",
  defaultValue: "1",
  isMultiple: false,
  property: () => {},
  selectedChange:(value:any) => {}
});

const {dicType,name} = props;
const dicCustomizeSelect!:any = ref(null);
const url = computed(() =>{
  return "/dictionary/getDicDataByGroupId?groupId=" + dicType
})

const resetFields = () =>{
  nextTick(() => {
    dicCustomizeSelect.value.resetFields();
  })
}

const setData = (value:any) =>{
  if(value == undefined){
    return;
  }
  nextTick(() => {
    dicCustomizeSelect.value.setData(value);
  });
}
 const customizeChange = (field: string, value: any) => {
   emits("customizeChange",field,value);
}

const getField = () =>{
  return name;
}

const getData = () => {
  return dicCustomizeSelect.value.getData();
}

defineExpose({resetFields,setData,getField,getData});

</script>

<style scoped>

</style>